@extends('layout.master')
@section('content')
    <div class="right_col" role="main">
        <div class="">
            {{-- <div class="page-title">
                <div class="title_left">
                    <h3>Staff <small>List</small></h3>
                </div>
            </div> --}}

            <div class="clearfix"></div>
            @include('alerts')
            <div class="row" style="display: block;">
                <div class="col-md-4 col-sm-12 ">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Vehicle Rate<small>Create</small></h2>

                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            @session('success')
                                <div class="alert alert-success alert-dismissible " role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                            aria-hidden="true">×</span>
                                    </button>
                                    <strong>Success!</strong> {{ $value }}
                                </div>
                            @endsession
                            @session('error')
                                <div class="alert alert-danger alert-dismissible " role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                            aria-hidden="true">×</span>
                                    </button>
                                    <strong>Error!</strong> {{ $value }}
                                </div>
                            @endsession
                            <form id="demo-form" action="{{ route('admin.vehicle.rate.store') }}" data-parsley-validate
                                method="POST">
                                @csrf
                                <label for="vehicle_type">Vehicle Type * :</label>
                                <select name="vehicle_type" id="vehicle_type"
                                    class="form-control @error('vehicle_type') is-invalid @enderror" required>
                                    <option value="">Select Vehicle Type</option>
                                    @foreach ($vehicle_types as $type)
                                        <option value="{{ $type->id }}">{{ $type->name }}</option>
                                    @endforeach
                                </select>
                                @error('vehicle_type')
                                    <label class="text-danger">{{ $message }}</label>
                                @enderror
                                <label for="city_rate">City rate * :</label>
                                <input type="number" id="city_rate"
                                    class="form-control @error('city_rate') is-invalid @enderror" name="city_rate"
                                    required />
                                @error('city_rate')
                                    <label class="text-danger">{{ $message }}</label>
                                @enderror
                                <label for="outstation_rate">Outstation Rate * :</label>
                                <input type="number" id="outstation_rate"
                                    class="form-control @error('outstation_rate') is-invalid @enderror"
                                    name="outstation_rate" required />
                                @error('outstation_rate')
                                    <label class="text-danger">{{ $message }}</label>
                                @enderror
                                <label for="description">Description:</label>
                                <textarea id="description" name="description" class="form-control @error('description') is-invalid @enderror"
                                    rows="3"></textarea>
                                @error('description')
                                    <label class="text-danger">{{ $message }}</label>
                                @enderror
                                <br />
                                <button type="submit" class="btn btn-primary"><span>Submit</span></button>

                            </form>

                        </div>
                    </div>
                </div>
                <div class="col-md-8 col-sm-12 ">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Vehicle Rate<small>List</small></h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card-box table-responsive">
                                        <table class="table bulk_action vehicle-rate-table">
                                            <thead>
                                                <tr class="headings">
                                                    <th class="column-title">Vehicle Type </th>
                                                    <th class="column-title">City rate </th>
                                                    <th class="column-title">Outstation rate </th>
                                                    <th class="column-title no-link last text-right"><span
                                                            class="nobr">Action</span>
                                                    </th>
                                                </tr>
                                            </thead>

                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            var table = $('.vehicle-rate-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.vehicle.rate.index') }}",
                columns: [{
                        data: 'vehicle_type',
                        name: 'vehicle_type'
                    },
                    {
                        data: 'city_rate',
                        name: 'city_rate'
                    },
                    {
                        data: 'outstation_rate',
                        name: 'outstation_rate'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },

                ],
                columnDefs: [{
                        width: "40%",
                        targets: 0
                    }, // Role column
                    {
                        width: "40%",
                        targets: 1
                    }, // Type column
                    {
                        width: "20%",
                        targets: 2,
                        className: "text-right"
                    }, // Action column
                ]

            });

            $(document).on('click', '.delete', function() {
                var url = $(this).data('url');
                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            method: 'DELETE',
                            url: url,
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response.status) {
                                    Swal.fire({
                                        title: "Deleted!",
                                        text: response.message,
                                        icon: "success"
                                    });
                                    $('.vehicle-rate-table').DataTable().ajax.reload();
                                } else {
                                    Swal.fire({
                                        title: "Error",
                                        text: response.message,
                                        icon: "error"
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                console.log(xhr.responseText);
                                Swal.fire({
                                    title: "Error",
                                    text: "An error occurred. Please try again later.",
                                    icon: "error"
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush